<template>
  <div class="journal-home">
    <div class="header">
      <h1 class="title">我的手账</h1>
      <div class="style-selector">
        <el-radio-group v-model="currentStyle" size="large">
          <el-radio-button value="modern">简约现代</el-radio-button>
          <el-radio-button value="vintage">复古手绘</el-radio-button>
          <el-radio-button value="cute">可爱拼贴</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- 根据选择的风格渲染不同的组件 -->
    <div class="journal-content">
      <ModernStyle v-if="currentStyle === 'modern'" :entries="journalEntries" />
      <VintageStyle v-else-if="currentStyle === 'vintage'" :entries="journalEntries" />
      <CuteStyle v-else-if="currentStyle === 'cute'" :entries="journalEntries" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { JournalStyle } from '../types'
import { mockJournalEntries } from '../mock/data'
import ModernStyle from '../components/ModernStyle.vue'
import VintageStyle from '../components/VintageStyle.vue'
import CuteStyle from '../components/CuteStyle.vue'

const currentStyle = ref<JournalStyle>('modern')
const journalEntries = ref(mockJournalEntries)
</script>

<style scoped>
.journal-home {
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}

.header {
  max-width: 1200px;
  margin: 0 auto 30px;
  text-align: center;
}

.title {
  font-size: 36px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.style-selector {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.journal-content {
  max-width: 1400px;
  margin: 0 auto;
}
</style>
